<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">主题乐园</el-breadcrumb-item>
      <el-breadcrumb-item>羽落天堂</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <TopicSwiper :swiperOptions="oceanSwiper">
        <TopicSwiperItem
          v-for="(item, index) in swiperList"
          :key="index"
          class="swiper-item"
        >
          <el-radio v-model="radio" :label="index + 1">
            <el-card
              :class="radio == index + 1 ? 'checked' : ''"
              :body-style="{ padding: '0px', width: '210px', height: '369px' }"
            >
              <img :src="item.imgUrl" width="210" height="279" class="image" />
              <div class="describe" style="padding: 14px">
                <h2 :class="radio == index + 1 ? 'h2_border' : ''">
                  0{{ index + 1 }}
                </h2>
                <div>
                  <p class="title">{{ item.title }}</p>
                  <p class="start">
                    欢乐指数：<span v-for="i in item.startNum" :key="i">★</span>
                  </p>
                </div>
              </div>
            </el-card>
          </el-radio>
        </TopicSwiperItem>
      </TopicSwiper>
      <div style="margin-top: 30px">
        <div style="width: 685px; float: left">
          <el-carousel height="356px" v-if="radio == 1">
            <el-carousel-item v-for="(item, index) in carousel_1" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="356px" v-if="radio == 2">
            <el-carousel-item v-for="(item, index) in carousel_2" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="356px" v-if="radio == 3">
            <el-carousel-item v-for="(item, index) in carousel_3" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="356px" v-if="radio == 4">
            <el-carousel-item v-for="(item, index) in carousel_4" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <img
            :src="carousel_5.imgUrl"
            alt=""
            v-if="radio == 5"
            height="356px"
            width="685px"
          />
          <el-carousel height="356px" v-if="radio == 6">
            <el-carousel-item v-for="(item, index) in carousel_6" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="356px" v-if="radio == 7">
            <el-carousel-item v-for="(item, index) in carousel_7" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="content">
          <h3>{{ content_1.h3 | h3Filter() }}</h3>
          <div>
            <span>{{ content_1.span | spanFilter() }}</span>
          </div>
          <p>{{ content_1.p | pFilter() }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopicSwiper from "@/components/TopicSwiper.vue";
import TopicSwiperItem from "@/components/TopicSwiperItem.vue";

// 过滤器中使用data中的数据
// 1. 声明一个that变量
// 2. 在beforeCreate生命周期函数中将this赋值给that
// 3. 在过滤器中通过that.调用
let that;
export default {
  components: {
    TopicSwiper,
    TopicSwiperItem,
  },
  filters: {
    h3Filter() {
      return that[`content_${that.radio}`].h3;
    },
    strongFilter() {
      return that[`content_${that.radio}`].strong;
    },
    spanFilter() {
      return that[`content_${that.radio}`].span;
    },
    pFilter() {
      return that[`content_${that.radio}`].p;
    },
  },
  data() {
    return {
      radio: "1",
      oceanSwiper: {
        slidesPerView: 5,
        spaceBetween: 30,
      },
      swiperList: [
        {
          imgUrl: require("@/assets/images/FeatherHeaven-1.png"),
          title: "羽落天堂主题区",
          startNum: 5,
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-2.png"),
          title: "魔法大草帽",
          startNum: 4,
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-3.png"),
          title: "丛林迷旋",
          startNum: 5,
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-4.png"),
          title: "莲花栈道",
          startNum: 3,
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-5.png"),
          title: "浪花跳跳",
          startNum: 5,
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-6.png"),
          title: "魔术自行车",
          startNum: 3,
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-7.png"),
          title: "Disko",
          startNum: 5,
        },
      ],
      carousel_1: [
        {
          imgUrl: require("@/assets/images/FeatherHeaven-1-1.png"),
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-1-2.png"),
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-1-3.png"),
        },
      ],
      carousel_2: [
        {
          imgUrl: require("@/assets/images/FeatherHeaven-2-1.png"),
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-2-2.png"),
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-2-3.png"),
        },
      ],
      carousel_3: [
        {
          imgUrl: require("@/assets/images/FeatherHeaven-3-1.png"),
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-3-2.png"),
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-3-3.png"),
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-3-4.png"),
        },
      ],
      carousel_4: [
        {
          imgUrl: require("@/assets/images/FeatherHeaven-4-1.png"),
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-4-2.png"),
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-4-3.png"),
        },
      ],
      carousel_5: {
        imgUrl: require("@/assets/images/FeatherHeaven-5-1.png"),
      },
      carousel_6: [
        {
          imgUrl: require("@/assets/images/FeatherHeaven-6-1.png"),
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-6-2.png"),
        },
      ],
      carousel_7: [
        {
          imgUrl: require("@/assets/images/FeatherHeaven-7-1.png"),
        },
        {
          imgUrl: require("@/assets/images/FeatherHeaven-7-2.png"),
        },
      ],
      content_1: {
        h3: "羽落天堂主题区",
        strong: "",
        span: "",
        p: "",
      },
      content_2: {
        h3: "魔法大草帽",
        strong: "",
        span: "项目特点：旋转、欢乐 欢乐指数：★★★★ 刺激指数：★★★★",
        p: "这是一顶充满魔力的大草帽，坐在宽大的帽檐上，在热情似火的音乐中，可以享受到六种不同的旋转魔力：中心旋转、座舱旋转、臂的提升、偏心圆旋转、座舱交替上升、下降",
      },
      content_3: {
        h3: "丛林迷旋",
        strong: "",
        span: "项目特点：坐立不安 欢乐指数：★★★★★ 刺激指数：★★★",
        p: "和家人朋友围坐在这个神奇的转盘上，伴随着富有节奏的音乐，身体随着圆盘运动。如大海波涛颠簸，又如太空飞碟起伏，时快时慢，变化无穷。我们宛如一个个跳动的音符，共同演奏出一段欢乐的乐章……",
      },
      content_4: {
        h3: "莲花栈道",
        strong: "",
        span: "",
        p: "",
      },
      content_5: {
        h3: "浪花跳跳",
        strong: "",
        span: "项目特点： 旋转  上升  下降  嗨玩指数： ★★★★★",
        p: "伴随音乐，自主操控座椅旋转，像浪花一样此起彼伏地舞动，有节奏地上升和下降。",
      },
      content_6: {
        h3: "魔术自行车",
        strong: "",
        span: "项目特点：欢乐、惊奇     欢乐指数：★★★ 刺激指数：★★★",
        p: "魔术自行车可不一般,骑着它,能让你飞腾起来！俯视多罗碧加乐园在脚下旋转,是不是别有一番风味呢？",
      },
      content_7: {
        h3: "Disko",
        strong: "",
        span: "项目特点：运行高度10米 正反旋转摆动角度：±55°失重 旋转、滑翔 惊险 刺激   体验指数：★★★★★",
        p: "一个大圆盘顺着弧形的轨道摇摆起来,带领人们一起跳起了经典又欢快的DISKO！圆盘随着音乐旋转并来回滑荡,大家载歌载舞,好不开心！",
      },
    };
  },
  computed: {},
  beforeCreate() {
    that = this;
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
::v-deep .el-breadcrumb {
  font-size: 21px;
  line-height: 2;
}

.checked {
  background-color: #f7b324;
  color: #fff;
}

.h2_border {
  border-right: 2px solid #fef2d8 !important;
}

::v-deep .el-radio__input {
  display: none;
}

.swiper-item {
  display: flex;
  flex-direction: column;

  .el-card {
    border-radius: 0 0 20px 20px;
  }

  .el-card:hover {
    background-color: #f7b324;
    color: #fff;
    cursor: pointer;
  }

  .el-card:hover h2 {
    border-right: 2px solid #fef2d8;
  }

  .describe {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    margin-top: 10px;

    h2 {
      border-right: 2px solid #575757;
      padding-right: 5px;
      margin-right: 10px;
    }

    .title {
      font-size: 16px;
      margin-bottom: 5px;
    }

    .start {
      font-size: 12px;
    }
  }
}

.content {
  background-color: #f7b324;
  border-radius: 10px;
  padding: 20px;
  margin-left: 705px;
  min-height: 316px;

  h3 {
    width: max-content;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    background-color: #d29004;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 20px;
  }

  > div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #df9f18;
    padding-bottom: 20px;
    padding-left: 5px;
    margin-bottom: 25px;
  }

  > p {
    line-height: 24px;
    padding-left: 5px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
}
</style>
